<html>
<head>
    <meta charset="utf-8"/>
    <link type="text/css" href="css/style.css" rel="stylesheet"/>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="backgroup-index">
<h1 id="logo"></h1>
<div id="wapper">
<div id="search">
    <form method="post">
        <input type="text" style="width: 300px"/>
        <input type="submit" value="search" style="width: 100px;"/>
    </form>
</div>
<div id="main2"></div>
<div id="main">
<div id="header">
    <ul>
        <li><a href="#">Trang chu</a></li>
        <li><a href="#">San pham mua he</a></li>
        <li><a href="#">San pham mua dong</a></li>
        <li><a href="#">Gioi Thieu</a></li>
        <li><a href="#">Tim Kiem</a></li>
        <li><a href="#">Lien he</a></li>
    </ul>
</div>
<div id="main_left">
    <div class="menu-left">

        <h2 style="background-color:#999999;">noi dung 1</h2>
        <h2 style="border-bottom:#999999;border-bottom-style:solid;border-bottom-width:thin;color: coral; ">
            noi dung 2</h2>

        <h2 style="color: coral;">mua he</h2>
        <ul>
            <li><span>dep Nam</span></li>
            <li><span>dep Nu</span></li>
            <li><span>dep em</span></li>
        </ul>
        <h2 style="color: coral; border-top:#999999 solid thin ">Mua dong </h2>
        <ul>
            <li><span>Nam</span></li>
            <li><span>Nu</span></li>
            <li><span>Tre em</span></li>
        </ul>
    </div>
    <div class="contact">
        <h2 >
            phone   </h2>
        <div class="img-contact">
            <img src="images/phone.jpg"  >
            <strong style="top: 0;left: 100px;">Phone</strong><br/>
            <span style="top: 20px;">+7(945) 988 7693</span> <br/>
            <span style="top: 40px;">+7(499) 161 4177</span> <br/>
            <strong style="top: 60px;">Email</strong> <br/>
            <span style="top: 80px;">tingo-shoes@mail.ru</span> <br/>
            <span style="top: 100px;">livial99@mail.ru</span> <br/>
        </div>

    </div>
    <div class="logo-left">
        <img src="images/chim.png">
    </div>
</div>
<div id="main_right">
    <div class="hinh">
        <img src="images/girl.jpg">
    </div>
    <!--slide-->
    <div class="slide">
        <div class="scrollprev">
        </div>
        <div class="scrollwrapper">
            <div class="scrollbox">
                <div class="scrollbox-content">
                    <strong>Model:</strong> <span>PK 14-600</span><br />
                    <strong>Sizes:</strong> <span>24-30</span><br />
                    <span>24 nap a nopode</span>
                </div>
                <img class="scrollbox-image" src="images/anh-san-pham-scrollbar.png" />
            </div>
            <div class="scrollbox">
                <div class="scrollbox-content">
                    <strong>Model:</strong> <span>PK 14-600</span><br/>
                    <strong>Sizes:</strong> <span>24-30</span><br />
                    <span>24 nap a nopode</span>
                </div>
                <img class="scrollbox-image" src="images/anh-san-pham-scrollbar.png" />
            </div>
            <div class="scrollbox">
                <div class="scrollbox-content">
                    <strong>Model:</strong> <span>PK 14-600</span><br />
                    <strong>Sizes:</strong> <span>24-30</span><br />
                    <span>24 nap a nopode</span>
                </div>
                <img class="scrollbox-image" src="images/anh-san-pham-scrollbar.png" />
            </div>
            <div class="scrollbox lastbox">
                <div class="scrollbox-content">
                    <strong>Model:</strong> <span>PK 14-600</span><br />
                    <strong>Sizes:</strong> <span>24-30</span><br />
                    <span>24 nap a nopode</span>
                </div>
                <img class="scrollbox-image" src="images/anh-san-pham-scrollbar.png" />
            </div>
            <div class="clear"></div>
        </div>
        <div class="scrollnext">
        </div>
        <div class="clear"></div>
    </div>
    <!--noi dung slide-->
    <div class="noidung-slide">
        noi dung 1 bai duoi slide <br>
        noi dung 1 bai duoi slide <br>
        noi dung 1 bai duoi slide <br>
        noi dung 1 bai duoi slide <br>
        noi dung 1 bai duoi slide <br>

    </div>

</div>

<div id="sp_tag">
    <!--tab-->
    <div class="nav-article">
        <ul  class="nav-account">
            <li class="selected_tab">
                <a href="javascript:void(0)" title="content_1" ><span style="">menu 1 menu 1</span></a>
            </li>
            <li class="unselect_tab">
                <a href="javascript:void(0)" title="content_2"><span style="">menu 2 menu 1 menu 1</span></a>
            </li>
            <li class="unselect_tab">
                <a href="javascript:void(0)" title="content_3"><span style="">menu 3 menu 1menu 1</span></a>
            </li>
            <li class="unselect_tab">
                <a href="javascript:void(0)" title="content_4"><span style="">me nu4 menu 1menu 1menu 1</span></a>
            </li>
        </ul>

        <div class="clear"></div>
        <div id="content_1" style="display: block;" class="account content_1">
            noi dung 1
        </div>
        <div id="content_2"  style="display: none;" class="account content_2">
            noi dung 2
        </div>
        <div id="content_3" style="display: none;" class="account content_3">
            noi dung 3
        </div>
        <div id="content_4" style="display: none;" class="account content_4">
            noi dung 4
        </div>
    </div>
</div>
<div id="sp1">
    <h2 id="title1">san pham 1</h2>
    <div class="sanpham">
        <span class="g1">ma san pham : <strong> PK 14-609</strong></span>
        <span class="g2">size : <strong>2  4-30</strong></span>
        <span class="ten">so luong</span>
        <img src="images/sp1.jpg" alt="">
    </div>
    <div class="sanpham">
        <span class="g1">ma san pham : <strong> PK 14-609</strong></span>
        <span class="g2">size : <strong>2  4-30</strong></span>
        <span class="ten">so luong</span>
        <img src="images/sp1.jpg" alt="">
    </div>
    <div class="sanpham">
        <span class="g1">ma san pham : <strong> PK 14-609</strong></span>
        <span class="g2">size : <strong>2  4-30</strong></span>
        <span class="ten">so luong</span>
        <img src="images/sp2.jpg" alt="">
    </div>
    <div class="sanpham">
        <span class="g1">ma san pham : <strong> PK 14-609</strong></span>
        <span class="g2">size : <strong>2  4-30</strong></span>
        <span class="ten">so luong</span>
        <img src="images/sp3.jpg" alt="">
    </div>
</div>
<div id="sp2">
    <h2 id="title2">san pham 2</h2>
    <div class="sanpham">
        <span class="g1">ma san pham : <strong> PK 14-609</strong></span>
        <span class="g2">size : <strong>2  4-30</strong></span>
        <span class="ten">so luong</span>
        <img src="images/sp1.jpg" alt="">
    </div>
    <div class="sanpham">
        <span class="g1">ma san pham : <strong> PK 14-609</strong></span>
        <span class="g2">size : <strong>2  4-30</strong></span>
        <span class="ten">so luong</span>
        <img src="images/sp1.jpg" alt="">
    </div>
    <div class="sanpham">
        <span class="g1">ma san pham : <strong> PK 14-609</strong></span>
        <span class="g2">size : <strong>2  4-30</strong></span>
        <span class="ten">so luong</span>
        <img src="images/sp2.jpg" alt="">
    </div>
    <div class="sanpham">
        <span class="g1">ma san pham : <strong> PK 14-609</strong></span>
        <span class="g2">size : <strong>2  4-30</strong></span>
        <span class="ten">so luong</span>
        <img src="images/sp3.jpg" alt="">
    </div>
</div>
<div id="sp3">
    <h2 id="title3">san pham 3</h2>
    <div class="sanpham">
        <span class="g1">ma san pham : <strong> PK 14-609</strong></span>
        <span class="g2">size : <strong>2  4-30</strong></span>
        <span class="ten">so luong</span>
        <img src="images/sp1.jpg" alt="">
    </div>
    <div class="sanpham">
        <span class="g1">ma san pham : <strong> PK 14-609</strong></span>
        <span class="g2">size : <strong>2  4-30</strong></span>
        <span class="ten">so luong</span>
        <img src="images/sp1.jpg" alt="">
    </div>
    <div class="sanpham">
        <span class="g1">ma san pham : <strong> PK 14-609</strong></span>
        <span class="g2">size : <strong>2  4-30</strong></span>
        <span class="ten">so luong</span>
        <img src="images/sp2.jpg" alt="">
    </div>
    <div class="sanpham">
        <span class="g1">ma san pham : <strong> PK 14-609</strong></span>
        <span class="g2">size : <strong>2  4-30</strong></span>
        <span class="ten">so luong</span>
        <img src="images/sp3.jpg" alt="">
    </div>
</div>
<div id="footer">
    footer
</div>
</div>

</div>
<script>
    $(".nav-account a").click(function () {
        $(".selected_tab").removeClass("selected_tab").addClass('unselect_tab');
        $(this).parent().addClass("selected_tab").removeClass('unselect_tab');
        $(".account").slideUp();
        var content_show = $(this).attr("title");
        $("."+content_show).slideDown();
    });

</script>
</div>

</body>
</html>